<template>
    <view>
        <u-navbar title="浏览记录" :autoBack="true" :placeholder="true" rightIcon="trash" @rightClick="cleanAllHistory">
        </u-navbar>
        <view class="main">
            <view v-if="historyList.length > 0" class="historyList">
                <view class="historyItem" v-for="item, index1 in historyList" :key="item.id">
                    <view class="dateTime">
                        {{ viewTimeFormat(item.time) }}
                    </view>
                    <u-swipe-action v-if="item.children.length > 0">
                        <u-swipe-action-item :options="options" v-for="bookItem, index2 in item.children"
                            @click="deleteHistory(index1, index2)" :key="bookItem.id">
                            <scroll-view scroll-y="true">
                                <view class="swipe-action u-border-top u-border-bottom">
                                    <view class="swipe-action__content">
                                        <view class="book" @click="goDetail(bookItem)">
                                            <u--image height="7rem" width="5rem" :src="bookItem.coverImage"></u--image>
                                            <view class="bookInfo">
                                                <view class="topBox">
                                                    <view class="bookNS">
                                                        <view class="bookName">{{ bookItem.bookTitle }}</view>
                                                        <view class="bookScore">豆瓣评分：{{ bookItem.score }}</view>
                                                    </view>
                                                    <view class="bookAuthor">作者：{{ bookItem.author }}</view>
                                                    <view class="bookPublisher">出版社：{{ bookItem.publisher }}</view>
                                                </view>
                                                <view class="bottomBox">
                                                    <view class="bookOldPrice">￥{{ bookItem.price }}</view>
                                                    <view class="bookPrice">￥{{ bookItem.curprice }}</view>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </scroll-view>
                        </u-swipe-action-item>
                    </u-swipe-action>
                </view>
            </view>
            <u-empty v-else mode="list" text="暂无历史记录" marginTop="50%"></u-empty>
        </view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'history',
    data() {
        return {
            options: [{
                text: '删除', style: {
                    backgroundColor: '#dd524d',
                }
            }],
            // historyList: [

            //     {
            //         viewTime: '2022-6-5 22:55:25',
            //         history: [
            //             {
            //                 id: 1,
            //                 bookTitle: '牛角书生',
            //                 author: '陈绮贞',
            //                 price: '12.00',
            //                 oldPrice: '20.00',
            //                 bookLink: 'http://182.61.31.180:5000/images/1653876610713_牛角书生.png',
            //                 userImg: 'http://182.61.31.180:3000/File/Images/ImgHeaders/7_1650554889031_1650554887181_1896498736.jpeg',
            //                 userName: '六月',
            //                 publisher: '人民文学出版社',
            //                 bookDesc: '牛角书生是一本关于牛角的故事，以及牛角的人生。',
            //                 publishTime: '2019-01-01',
            //                 isbn: '9787532709890',
            //                 freight: '5.00',
            //                 score: '9.8',
            //                 // 浏览时间
            //             },
            //             {
            //                 id: 1,
            //                 bookTitle: '牛角书生',
            //                 author: '陈绮贞',
            //                 price: '12.00',
            //                 oldPrice: '20.00',
            //                 bookLink: 'http://182.61.31.180:5000/images/1653876610713_牛角书生.png',
            //                 userImg: 'http://182.61.31.180:3000/File/Images/ImgHeaders/7_1650554889031_1650554887181_1896498736.jpeg',
            //                 userName: '六月',
            //                 publisher: '人民文学出版社',
            //                 bookDesc: '牛角书生是一本关于牛角的故事，以及牛角的人生。',
            //                 publishTime: '2019-01-01',
            //                 isbn: '9787532709890',
            //                 freight: '5.00',
            //                 score: '9.8',
            //                 // 浏览时间
            //             }
            //         ]
            //     },
            //       {
            //         // 浏览时间
            //         viewTime: '2019-01-01',
            //         history: [
            //             {
            //                 id: 1,
            //                 bookTitle: '牛角书生',
            //                 author: '陈绮贞',
            //                 price: '12.00',
            //                 oldPrice: '20.00',
            //                 bookLink: 'http://182.61.31.180:5000/images/1653876610713_牛角书生.png',
            //                 userImg: 'http://182.61.31.180:3000/File/Images/ImgHeaders/7_1650554889031_1650554887181_1896498736.jpeg',
            //                 userName: '六月',
            //                 publisher: '人民文学出版社',
            //                 bookDesc: '牛角书生是一本关于牛角的故事，以及牛角的人生。',
            //                 publishTime: '2019-01-01',
            //                 isbn: '9787532709890',
            //                 freight: '5.00',
            //                 score: '9.8',
            //             }
            //         ]
            //     },
            // ],
            day: [
                { isShow: false, name: '今天', },
                { isShow: false, name: '昨天' },
                { isShow: false, name: '前天' },
                { isShow: false, name: '三天前' }]
        }
    },
    computed: {
        ...mapGetters(['historyList']),
        viewTimeFormat() {
            return function (time) {
                let now = new Date()
                let viewTime = new Date(time)
                let diff = now - viewTime
                let day = Math.floor(diff / (1000 * 60 * 60 * 24))
                if (day == 0) {
                    return '今天'
                } else if (day == 1) {
                    return '昨天'
                } else if (day == 2) {
                    return '前天'
                } else {
                    return '三天前'
                }
            }
        }
    },
    methods: {
        deleteHistory(index1, index2) {
            this.$store.dispatch('deleteHistory', { index1, index2 })
        },
        cleanAllHistory() {
            uni.showModal({
                title: '提示',
                content: '您是否要清空浏览记录？',
                success: res => {
                    if (res.confirm) {
                        this.$store.dispatch('cleanAllHistory').then(res => {
                            if (res == 'success')
                                this.$tools.toast('清空记录成功')
                            else
                                tshi.$tools.toast('操作失败，请稍后再试')
                        })
                    }
                }
            });

        },
        goDetail(book) {
            this.$store.dispatch('getBookDetail', book.id).then(res => {
                if (res == 'success') {
                    this.$Router.push({
                        name: 'detail'
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss">
.u-page {
    padding: 0;
}

.u-demo-block__title {
    padding: 10px 0 2px 15px;
}

.swipe-action {
    &__content {
        padding: 25rpx 0;
    }

}

.main {
    .historyList {
        .historyItem {
            display: flex;
            flex-direction: column;
            margin: 0.5rem;

            .dateTime {
                font-size: 0.8rem;
                color: rgb(97, 97, 97);
                margin: 0.5rem 0;

            }

            .book {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-direction: row;
                // border-bottom: 1px solid #ccc;
                padding-bottom: 1rem;
                margin: 0.5rem;

                .bookInfo {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: space-around;

                    .topBox {
                        margin-left: 1rem;
                        font-size: 0.8rem;
                        color: #999;

                        .bookNS {
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            align-items: center;
                            width: 100%;
                            height: 2rem;
                            padding: 0.5rem;

                            .bookName {
                                font-size: 1rem;
                                font-weight: bold;
                                color: #333;
                            }

                            .bookScore {
                                margin-right: 1rem;
                                font-size: 0.8rem;
                                color: #999;
                            }
                        }



                    }

                    .bottomBox {
                        margin-left: 1rem;
                        display: flex;
                        flex-direction: row;
                        // justify-content: space-between;

                        .bookPrice {
                            margin-left: 0.5rem;
                            font-size: 0.8rem;
                            color: $uni-color-theme-6;
                        }

                        .bookOldPrice {
                            font-size: 0.8rem;
                            color: #999;
                            font-style: italic;
                            text-decoration: line-through;
                        }

                        .button {
                            margin-right: 1rem;
                            width: 20%;
                            background: $uni-color-theme-11;
                            color: white;
                            font-size: 0.8rem;
                            width: 5rem;
                            display: flex;
                            flex-direction: row;
                            justify-content: center;
                            align-items: center;
                        }
                    }


                }
            }

        }
    }
}
</style>